<template>
	<view class="pageBox">
		<view class="main">
			<view class="addressBox flex-between" @click="chooseAddress">
				<view class="address flex">
					<view class="addressTop flex-row">
						<view class="defaultText flex-center" v-show="address.status == 1">
							默认
						</view>
						<view class="addr">
							{{address.province}} {{address.city}} {{address.area}}
						</view>
					</view>
					<view class="addressCenter">
						{{address.address}}
					</view>
					<view class="addressBom">
						{{address.name}}&nbsp;&nbsp;&nbsp;&nbsp;{{address.mobile}}
					</view>
				</view>
				<image class="arrowRight" src="http://www.bobei.shop/static/home/arrowRight.png"></image>
			</view>

			<view class="goodsInfoBox">
				<view class="popupInfoBox" v-for="item in goodsList" :key="item.id">
					<view class=" flex-row">
						<image class="thumb" :src="item.thumbUrl"></image>
						<view class="infoR">
							<view class="title">
								{{item.title}}
							</view>
							<view class="infoRB flex-between">
								<view class="price">
									¥{{item.marketprice}}
								</view>
								<my-stepper :amountObj="item.num" @stepperChange="stepperChange($event, item)">
								</my-stepper>
							</view>
						</view>
					</view>
					<!-- 商品详情过来的 -->
					<view class="sku flex-between" v-if="info.info && info.info.hasoption == 1">
						<view class="skuL">
							产品规格
						</view>
						<view class="skuR">
							{{ skuText }}
						</view>
					</view>
					<!-- 购物车过来的 -->
					<view class="sku flex-between" v-if="item.specTitle">
						<view class="skuL">
							产品规格
						</view>
						<view class="skuR">
							{{ item.specTitle }}
						</view>
					</view>
				</view>

				<view class="bomL flex-row">
					<view class="total">
						共{{totalCount}}件
					</view>
					<view class="combined">
						合计：
					</view>
					<view class="price">
						¥{{setInfo.xjPrice}}
					</view>
				</view>

				<view class="remarks flex-between">
					<view class="remarksTitle">
						订单备注
					</view>
					<input class="remarksIpt" type="text" placeholder="备注" v-model="remarks">
				</view>
			</view>

			<view class="deduction">
				<view class="deductionTitle flex-row">
					<view class="m">使用易付豆抵扣(</view>
					<view class="s">{{setInfo.scoreTxt}}</view>
					<view class="m">)</view>
				</view>

				<view class="amount flex-between">
					<view class="amountTitle">数量：</view>
					<input class="amountIpt" type="number" placeholder="请输入数量"
						placeholder-style="color: #b6b6b6;font-size: 28rpx;" v-model="isScore" @input="isScoreChange">
				</view>

				<view class="amount flex">
					<view class="amountTitle">易付豆：</view>
					<view class="amountTitle">{{ user.credit_3 }}</view>
				</view>
				<view class="amount flex">
					<view class="amountTitle">运费：</view>
					<view class="amountTitle">{{ setInfo.freight }}</view>
				</view>
			</view>
		</view>

		<view class="bom flex-between">
			<view class="bomL flex-row">
				<view class="total">
					共{{totalCount}}件
				</view>
				<view class="combined">
					合计：
				</view>
				<view class="price">
					¥{{setInfo.finalPrice}}
				</view>
			</view>
			<view class="bomR">
				<button :plain="true" @click="submitOrder">提交订单</button>
			</view>
		</view>



		<my-popup-tips :showTips="showTips" @tipsOpen="tipsOpen" @tipsClose="tipsClose">
			<template #default>
				<view class="tipsBox flex-row">
					<view class="tipsTitle flex-center">
						提示
					</view>
					<image class="fail" src="http://www.bobei.shop/static/home/success.png" v-if="payReasult"></image>
					<image class="fail" src="http://www.bobei.shop/static/home/fail.png" v-if="!payReasult"></image>
					<view class="failReason" v-if="payReasult">
						支付成功
					</view>
					<view class="failReason" v-if="!payReasult">
						支付失败
					</view>
					<view class="tipsLine"></view>
					<view class="tipsBtnBox flex-center">
						<button class="backBtn" :plain="true" @click="onBackBtn" v-if="payReasult">返回首页</button>
						<button class="sureBtn" :plain="true" @click="onOrderBtn" v-if="payReasult">查看订单</button>
						<button class="sureBtn" :plain="true" @click="onSureBtn" v-if="!payReasult">确定</button>

					</view>
				</view>
			</template>
		</my-popup-tips>

		<my-popup-tips type="bottom" :showTips="paywayShow" @tipsOpen="paywayOpen" @tipsClose="paywayClose">
			<template #default>
				<view class="paywayBox">
					<image class="close" src="http://www.bobei.shop/static/my/payway/close.png" @click="paywayShow = false">
					</image>
					<view class="paywayTitle">
						选择支付方式
					</view>

					<view class="way">
						<view class="wayItem flex-between" v-for="item in actions" :key="item.id" @click="onWayItem(item)">
							<view class="wayItemLeft flex-row">
								<image class="wayItemLeftImg" :src="item.image"></image>
								<view class="wayItemLeftCon">
									<view class="wayItemLeftConText">
										{{ item.name }}
									</view>
									<!-- 	<view class="wayItemLeftConCard">
									123456789
								</view> -->
								</view>
							</view>
							<view class="wayItemRight">
								<image class="choose" src="http://www.bobei.shop/static/login/choose.png" v-if="!item.status">
								</image>
								<image class="choose" src="http://www.bobei.shop/static/login/choosed.png" v-if="item.status">
								</image>
							</view>
						</view>

						<view class="wayItem flex-between" @click="goMyBankCard('/pages/my/bank/myBankCard')">
							<view class="wayItemLeft flex-row">
								<image class="wayItemLeftImg" src="http://www.bobei.shop/static/my/payway/yinHang.png">
								</image>
								<view class="wayItemLeftCon">
									<view class="wayItemLeftConText">
										添加银行卡
									</view>
								</view>
							</view>
							<view class="wayItemRight">
								<view class="add flex-row">
									<view class="addText">
										去添加
									</view>
									<image class="arrowRight" src="http://www.bobei.shop/static/home/arrowRight.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>

					<button class="paySure" :plain="true" @click="onPaySure">确认付款</button>
				</view>
			</template>
		</my-popup-tips>

		<!-- 密码框 -->
		<my-popup-tips :showTips="passShow" :mask="true" @tipsOpen="passTipsOpen" @tipsClose="passTipsClose">
			<view class="passTipsBox">
				<view class="tipsTitle flex-center">
					提示
				</view>

				<view class="tipsText flex-center">
					<input type="password" class="safeword" v-model="safeword" placeholder="请输入支付密码">
				</view>

				<view class="tipsBtnBox flex-between">
					<button class="tipsCloseBtn" :plain="true" @click="onPassTipsCloseBtn">取消</button>
					<button class="tipsSureBtn" :plain="true" @click="onPassTipsSureBtn" :disabled="oneClick">确定</button>
				</view>
			</view>
		</my-popup-tips>

		<!-- 完善信息提示弹窗组件 -->
		<perfect-information :showTips="perfectShowTips" :mask="perfectMask" :type="perfectType" @tipsOpen="perfectTipsOpen"
			@tipsClose="perfectTipsClose" @onPrefect="onPrefect"></perfect-information>

		<determined-popover :showTips="determinedShow" @tipsOpen="determineTipsOpen" @tipsClose="determineTipsClose"
			@onDeterClose="onDeterClose" @onPrefect="determineOnPrefect" :deterTitle="deterTitle" :deterContent="deterContent"
			:deterCloseShow="false"></determined-popover>

		<determined-popover :showTips="determinedShow2" @tipsOpen="determineTipsOpen2" @tipsClose="determineTipsClose2"
			@onDeterClose="onDeterClose2" @onPrefect="determineOnPrefect2" :deterTitle="deterTitle2"
			:deterContent="deterContent2"></determined-popover>

		<determined-popover :showTips="determinedShow3" @tipsOpen="determineTipsOpen3" @tipsClose="determineTipsClose3"
			@onDeterClose="onDeterClose3" @onPrefect="determineOnPrefect3" :deterTitle="deterTitle3"
			:deterContent="deterContent3" :deterCloseShow="false"></determined-popover>
	</view>
</template>

<script>
	import myStepper from "../components/my-stepper/my-stepper.vue";
	import myPopupTips from "../components/my-popup-tips/my-popup-tips.vue";
	import perfectInformation from "../components/perfect-information/perfect-information.vue";
	import determinedPopover from "../components/determined-popover/determined-popover.vue";
	export default {
		components: {
			"my-stepper": myStepper,
			"my-popup-tips": myPopupTips,
			"perfect-information": perfectInformation,
			"determined-popover": determinedPopover,
		},
		data() {
			return {
				determinedShow: false,
				deterTitle: "",
				deterContent: "",

				determinedShow2: false,
				deterTitle2: "",
				deterContent2: "",

				determinedShow3: false,
				deterTitle3: "",
				deterContent3: "",

				perfectShowTips: false,
				perfectMask: true,
				perfectType: "center",
				remarks: "",
				totalCount: 0,
				showTips: false,
				payReasult: false, // 支付结果 true 或 false
				amount: "",
				balance: 0,
				info: {
					num: 1
				},
				isScore: 0,
				address: {
					"id": 0,
					"userId": 0,
					"name": "",
					"mobile": "",
					"province": "",
					"city": "",
					"area": "",
					"address": "",
					"status": 0,
					"provinceId": "150000",
					"cityId": "150400",
					"countyId": "150423"
				},
				setInfo: {},
				user: {},
				carts: [],
				goodsList: [],

				paywayShow: false,
				bankIcon: {
					CIB: "http://www.bobei.shop/static/my/payway/CIB.png", // 兴业银行
					ECITIC: "http://www.bobei.shop/static/my/payway/ECITIC.png", // 中信银行
					PINGANBANK: "http://www.bobei.shop/static/my/payway/PINGANBANK.png", // 平安银行
					SHB: "http://www.bobei.shop/static/my/payway/SHB.png", // 上海银行
					ABC: "http://www.bobei.shop/static/my/payway/ABC.png", // 农业银行
					BCCB: "http://www.bobei.shop/static/my/payway/BCCB.png", // 北京银行
					BOC: "http://www.bobei.shop/static/my/payway/BOC.png", // 中国银行
					BOCO: "http://www.bobei.shop/static/my/payway/BOCO.png", // 交通银行
					CCB: "http://www.bobei.shop/static/my/payway/CCB.png", // 建设银行
					CEB: "http://www.bobei.shop/static/my/payway/CEB.png", // 光大银行
					CGB: "http://www.bobei.shop/static/my/payway/CGB.png", // 广发银行
					CMBC: "http://www.bobei.shop/static/my/payway/CMBC.png", // 民生银行
					CMBCHINA: "http://www.bobei.shop/static/my/payway/CMBCHINA.png", // 招商银行
					HXB: "http://www.bobei.shop/static/my/payway/HXB.png", // 华夏银行
					ICBC: "http://www.bobei.shop/static/my/payway/ICBC.png", // 工商银行
					POST: "http://www.bobei.shop/static/my/payway/POST.png", // 邮储银行
					SPDB: "http://www.bobei.shop/static/my/payway/SPDB.png", // 浦发银安
				},
				actionsChoose: {
					name: "", // 支付方式名称
					id: "", // 支付方式id
					status: false, // 是否选中
					image: "", // 支付方式图标
					bankCardId: "", // 银行卡支付的银行卡id
					bankAbb: "", // 银行缩写大写字母
					cardNo: "", // 银行卡号
				},
				actions: [],
				actions2: [{
						name: "账户余额", // 支付方式名称
						id: "0", // 支付方式id
						status: false, // 是否选中
						image: "http://www.bobei.shop/static/my/payway/yuE.png", // 支付方式图标
						bankCardId: "", // 银行卡支付的银行卡id
						bankAbb: "", // 银行缩写大写字母
					},
					// {
					// 	name: "微信支付",
					// 	id: "1",
					// 	status: false,
					// 	image: "http://www.bobei.shop/static/my/payway/weiXin.png",
					// 	bankCardId: "",
					// 	bankAbb: "",
					// },
					{
						name: "支付宝支付",
						id: "2",
						status: false,
						image: "http://www.bobei.shop/static/my/payway/zhiFuBao.png",
						bankCardId: "",
						bankAbb: "",
					},
					//// 微信APP支付
					// {
					// 	name: "微信APP",
					// 	id: "11",
					// 	status: false,
					// 	image: "http://www.bobei.shop/static/my/payway/weiXin.png",
					// 	bankCardId: "",
					// 	bankAbb: "",
					// },
					//// 支付宝APP支付
					// {
					// 	name: "支付宝APP",
					// 	id: "12",
					// 	status: false,
					// 	image: "http://www.bobei.shop/static/my/payway/zhiFuBao.png",
					// 	bankCardId: "",
					// 	bankAbb: "",
					// },
					// {
					// 	name: "云闪付",
					// 	id: "3",
					// 	status: false,
					// 	image: "http://www.bobei.shop/static/my/payway/yuShanFu.png",
					// 	bankCardId: "",
					// 	bankAbb: "",
					// },
				],
				interval: "",
				passShow: false,
				safeword: "",

				sku_id: "", // 选择的规格id拼接
				skuId: "", // 选中的规格id拼接后对应的id
				skuText: "请选择规格", // 选中的规格id拼接后对应的id对应的的拼接规格
				seckill: "", // seckill:seckill为秒杀

				oneClick: false,
			}
		},
		onLoad(e) {
			this.seckill = e.seckill;
			if (e.carts) {
				this.carts = e.carts.split(",");
			} else {
				this.info = JSON.parse(uni.getStorageSync('goodsInfo'))
				// console.log(this.info, "this.info");
				this.info.info.num = this.info.num;
				this.goodsList = [this.info.info];
				this.totalCount = this.info.num;
				this.sku_id = this.info.sku_id;
				this.skuId = this.info.skuId;
				this.skuText = this.info.skuText;
				// console.log("this.goodsList", this.goodsList)
			}
			// this.setOrder()
			this.getWallet()
		},
		onShow() {
			this.getAddressList()
			this.getBankCardList()
		},
		onHide() {
			clearInterval(this.interval)
		},
		onUnload() {
			clearInterval(this.interval)
		},
		methods: {
			onPassTipsSureBtn() {
				if (!this.safeword) {
					uni.showToast({
						title: "请输入支付密码密码",
						icon: "none",
						duration: 1500
					})
					return;
				}
				this.oneClick = true;
				if (this.carts.length) return this.submitCartOrder();
				this.$post({
					url: '/portal/Shop',
					module: "Goods",
					interface: 6001,
					data: {
						goodsId: this.seckill == "seckill" ? this.info.info.goodsId : this.info.info.id,
						num: this.info.info.num,
						specsId: this.sku_id,
						couponId: 0,
						addressId: this.address.id || 0,
						isScore: this.isScore,
						remark: this.remarks,
					}
				}).then(res => {
					if (res.code == -618) {
						this.deterTitle = "提示";
						this.deterContent = res.msg + ",点击确定跳转到首页。";
						this.determinedShow = true;
						this.passShow = false;
						setTimeout(() => {
							this.oneClick = false;
						}, 1500)

					} else {
						this.passShow = false;
						this.payOrder(res.orderNo);
						setTimeout(() => {
							this.oneClick = false;
						}, 1500)
					}
				}).catch(() => {
					this.passShow = false;
					setTimeout(() => {
						this.oneClick = false;
					}, 1500)
				})
			},
			determineTipsOpen(param) {
				this.determinedShow = param;
			},
			determineTipsClose(param) {
				this.determinedShow = param;
			},
			onDeterClose() {
				this.determinedShow = false;
			},
			determineOnPrefect() {
				this.determinedShow = false;
				uni.switchTab({
					url: '/pages/home/index'
				});
			},

			getAddressList() {
				this.$post({
					module: 'User',
					interface: 6000,
					data: {
						page: 1,
						lastId: 0
					}
				}).then(res => {
					if (res.length > 0) {
						this.address = res[0]
						this.setOrder()
					} else {
						this.deterTitle2 = "提示";
						this.deterContent2 = "请先添加收货地址";
						this.determinedShow2 = true;
						// console.log("111",this.determinedShow2)
					}

				})
			},
			determineTipsOpen2(param) {
				this.determinedShow2 = param;
				// console.log("222",this.determinedShow2)
			},
			determineTipsClose2(param) {
				this.determinedShow2 = param;
				// console.log("333",this.determinedShow2)
			},
			onDeterClose2() {
				this.determinedShow2 = false;
				// console.log("444",this.determinedShow2)
				uni.navigateBack()
			},
			determineOnPrefect2() {
				this.determinedShow2 = false;
				// console.log("555",this.determinedShow2)
				uni.navigateTo({
					url: "/serviceCenter/addressEdite",
				})
			},

			submitCartOrder() {
				this.oneClick = true;
				this.$post({
					url: "/portal/Shop",
					module: "Cart",
					interface: "1006",
					data: {
						id: this.carts,
						couponId: 0,
						addressId: this.address.id || 0,
						isScore: this.isScore,
						remark: this.remarks,
					}
				}).then(res => {
					// console.log(res)
					if (res.code == -618) {
						that.deterTitle3 = "提示";
						that.deterContent3 = res.msg + ",点击确认跳转到购物车。";
						that.determinedShow3 = true;
						this.passShow = false;
						setTimeout(() => {
							this.oneClick = false;
						}, 1500)
					} else {
						this.passShow = false;
						this.payOrder(res.orderNo);
						setTimeout(() => {
							this.oneClick = false;
						}, 1500)
					}
				}).catch(() => {
					this.passShow = false;
					setTimeout(() => {
						this.oneClick = false;
					}, 1500)
				})
			},
			determineTipsOpen3(param) {
				this.determinedShow3 = param;
			},
			determineTipsClose3(param) {
				this.determinedShow3 = param;
			},
			onDeterClose3() {
				this.determinedShow3 = false;
			},
			determineOnPrefect3() {
				this.determinedShow3 = false;
				uni.switchTab({
					url: '/pages/cart/index'
				});
			},

			onPassTipsCloseBtn() {
				this.passShow = false;
			},
			passTipsOpen(param) {
				this.passShow = param;
			},
			passTipsClose(param) {
				this.passShow = param;
			},
			isScoreChange() {
				if (this.isScore < 0) {
					this.isScore = 0;
				}
				// 有购物车id，走购物车流程
				if (this.carts.length) {
					return this.cartSettlement();
				} else {
					return this.setOrder();
				}
			},
			chooseAddress() {
				uni.navigateTo({
					url: `/serviceCenter/address?select=${this.address.id || 0}`,
					events: {
						select: (item) => {
							this.address = item;
							this.setOrder();
						}
					}
				})
			},
			cartSettlement() {
				this.$post({
					url: "/portal/Shop",
					module: "Cart",
					interface: "1003",
					data: {
						id: this.carts,
						couponId: 0,
						addressId: this.address.id || 0,
						isScore: this.isScore
					}
				}).then(res => {
					// console.log("购物车结算", res)
					this.setInfo = res;
					let totalCount = 0;
					this.goodsList = res.cart.map(item => {
						totalCount += item.num;
						return {
							...item,
							title: item.goodsName,
							thumbUrl: item.thumb,
							marketprice: item.price,
						}
					});
					// console.log("this.goodsList", this.goodsList)
					this.totalCount = totalCount;
				})
			},
			async stepperChange(num, item) {
				// // console.log(changeNum)
				if (this.carts.length) {
					const oldNum = item.num;
					item.num = num;
					try {
						await this.$post({
							url: "/portal/Shop",
							module: "Cart",
							interface: "1001",
							data: {
								num,
								id: item.id,
							}
						})
					} catch (e) {
						item.num = oldNum;
					}
				} else {
					item.num = num;
				}
				this.setOrder();

			},
			tipsOpen(param) {
				// console.log("tips弹出", param)
			},
			tipsClose(param) {
				// console.log("tips关闭", param)
			},
			onSureBtn() {
				this.showTips = false;
			},
			onBackBtn() {

				uni.switchTab({
					url: '/pages/home/index'
				})
				this.showTips = false;
			},
			onOrderBtn() {
				uni.redirectTo({
					url: '/pages/my/order'
				})
				this.showTips = false;
				// console.log("查看订单");
			},
			setOrder() {
				// 有购物车id，走购物车流程
				if (this.carts.length) return this.cartSettlement();
				this.$post({
					url: '/portal/Shop',
					module: 'Goods',
					interface: 6000,
					data: {
						goodsId: this.seckill == "seckill" ? this.info.info.goodsId : this.info.info.id,
						num: this.info.info.num,
						specsId: this.sku_id,
						couponId: 0,
						addressId: this.address.id || 0,
						isScore: this.isScore
					}
				}).then(res => {
					// console.log(res);
					this.setInfo = res;
					this.goodsList.forEach((item) => {
						if (item.id == res.id) {
							item.marketprice = res.marketprice;
						}
					})
				})
			},
			getWallet() {
				this.$post({
					module: 'User',
					interface: 1000,

				}).then(res => {
					this.user = res
				})
			},




			paywayOpen(param) {
				this.paywayShow = param;
			},
			paywayClose(param) {
				this.paywayShow = param;
			},
			goMyBankCard(url) {
				this.paywayShow = false;
				uni.navigateTo({
					url: url
				})
			},
			goPage(url) {
				uni.navigateTo({
					url: url
				})
			},
			// 银行卡列表
			getBankCardList() {
				this.$post({
					module: "Finance",
					interface: "1000",
				}).then((res) => {
					// console.log("银行卡列表", res);
					let bankCardList = [];
					res.list.forEach((item, index) => {
						bankCardList[index] = {
							name: item.cardNo,
							id: "4",
							status: false,
							image: this.bankIcon[item.bankCode] ?
								this.bankIcon[item.bankCode] : "http://www.bobei.shop/static/my/payway/yinHang.png",
							bankCardId: item.id,
							bankAbb: item.bankCode,
							cardNo: item.cardNo,
						};
					});

					this.actions = [...this.actions2, ...bankCardList]
					this.actions[0].status = true;
					this.actionsChoose = {
						name: this.actions[0].name,
						id: this.actions[0].id,
						status: this.actions[0].status,
						image: this.actions[0].image,
						bankCardId: this.actions[0].bankCardId,
						bankAbb: this.actions[0].bankAbb,
						cardNo: this.actions[0].cardNo,
					}
					// console.log("actions", this.actions);
				});
			},
			onWayItem(param) {
				this.actions.forEach((item) => {
					item.status = false;
					if (param.id == item.id) {
						item.status = true;
						this.actionsChoose = {
							name: item.name,
							id: item.id,
							status: item.status,
							image: item.image,
							bankCardId: item.bankCardId,
							bankAbb: item.bankAbb,
							cardNo: item.cardNo,
						}
					}
				})
			},
			submitOrder() {
				if (!this.user.mobile) {
					this.perfectShowTips = true;
					return;
				}
				this.paywayShow = true;
			},
			onPaySure() {
				this.paywayShow = false;
				this.passShow = true;

			},
			payOrder(orderNo) {
				this.$post({
						module: 'Pay',
						interface: 1000,
						data: {
							order_no: orderNo,
							type: '0',
							way: this.actionsChoose.id,
							cardId: this.actionsChoose.bankCardId,
							safeword: this.safeword,
						}
					}).then((res) => {
						if (this.actionsChoose.id == '0') { // 余额支付
							this.passShow = false;
							// this.paywayShow = false;
							this.payReasult = true;
							this.showTips = true;
						}
						if (this.actionsChoose.id == '2') { // 支付宝H5支付
							// #ifdef  H5
							window.location.href = res.charge;
							// #endif
							// #ifdef  APP-PLUS
							// uniapp打开浏览器
							plus.runtime.openURL(res.charge);
							// #endif
						} else if (this.actionsChoose.id == '4') { // 银行卡
							// 查询银行卡支付是否成功
							this.interval = setInterval(() => {
								this.$post({
										url: "/portal/Shop",
										module: "Order",
										interface: "1007",
										data: {
											orderNo: orderNo,
										},
									})
									.then((resp) => {
										if (resp.status == 1) {
											clearInterval(this.interval);
											this.passShow = false;
											// this.paywayShow = false;
											this.payReasult = true;
											this.showTips = true;
										} else if (resp.status == 0) {
											// console.log("查询支付状态中")
										} else {
											clearInterval(this.interval);
											this.passShow = false;
											// this.paywayShow = false;
											this.payReasult = false;
											this.showTips = true;
										}
									})

							}, 1500);
						}
					})
					.catch((err) => {
						// console.log("支付错误", err)
						this.passShow = false;
						// this.paywayShow = false;
						this.payReasult = false;
						this.showTips = true;
					})
			},
			perfectTipsOpen(param) {
				this.perfectShowTips = param;
			},
			perfectTipsClose(param) {
				this.perfectShowTips = param;
			},
			onPrefect() {
				uni.navigateTo({
					url: "/setting/improveData"
				})
				this.perfectShowTips = false;
			},
		},
	}
</script>

<style lang="scss" scoped>
	.pageBox {
		padding-bottom: 200rpx;
		background-color: #f9f9f9;
	}

	.main {
		height: calc(100vh - var(--window-top));
		background-color: #f9f9f9;
		padding: 0 0 200rpx;

		.addressBox {
			padding: 32rpx;
			background-color: #ffffff;
			border-radius: 16rpx;

			.address {
				width: 562rpx;
				flex-direction: column;
				justify-content: space-between;

				.addressTop {
					width: 100%;

					.defaultText {
						font-size: 18rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #ffffff;
						line-height: 24rpx;
						width: 44rpx;
						height: 28rpx;
						background: #FE2E1C;
						border-radius: 6rpx;
						white-space: nowrap;
					}

					.addr {
						margin-left: 10rpx;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
						line-height: 40rpx;
					}
				}

				.addressCenter {
					margin: 20rpx 0;
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
					line-height: 40rpx;
				}

				.addressBom {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
					line-height: 40rpx;
				}
			}

			.arrowRight {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.goodsInfoBox {
			padding: 32rpx;
			background-color: #ffffff;
			border-radius: 16rpx;
			margin-top: 32rpx;

			.popupInfoBox {
				margin-top: 20rpx;

				.thumb {
					width: 168rpx;
					height: 168rpx;
					border-radius: 16rpx;
				}

				.infoR {
					flex: 1;
					height: 168rpx;
					padding: 10rpx 0 0 10rpx;
					position: relative;

					.title {
						height: 88rpx;
						font-size: 30rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
						line-height: 44rpx;
						overflow: hidden; //超出的文本隐藏
						display: -webkit-box;
						-webkit-line-clamp: 2; // 超出多少行
						-webkit-box-orient: vertical;

					}

					.infoRB {
						width: 100%;
						position: absolute;
						bottom: 0;
						left: 0;
						z-index: 1;
						padding: 0 32rpx 0 10rpx;

						.price {
							font-size: 32rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #000000;
							line-height: 48rpx;
						}

						.stepper {
							.stepperBtn {
								width: 40rpx;
								height: 40rpx;
							}

							.stepperIpt {
								width: 60rpx;
								height: 40rpx;
								font-size: 28rpx;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 500;
								color: #000000;
								text-align: center;
							}
						}
					}
				}
			}

			.sku {
				margin-top: 40rpx;

				.skuL {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #afa9b0;
					line-height: 40rpx;
				}

				.skuR {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
					line-height: 36rpx;
				}
			}

			.bomL {
				justify-content: flex-end;
				margin-top: 60rpx;

				.total {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #afa9b0;
					line-height: 40rpx;
				}

				.combined {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
					line-height: 40rpx;
					margin-left: 20rpx;
				}

				.price {
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #000000;
					line-height: 44rpx;
				}
			}

			.remarks {
				margin-top: 10rpx;

				.remarksTitle {
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: normal;
					color: #000000;
				}

				.remarksIpt {
					width: 75%;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
					text-align: right;
				}
			}
		}

		.deduction {
			padding: 32rpx;
			background-color: #ffffff;
			border-radius: 16rpx;
			margin-top: 32rpx;

			.deductionTitle {
				.m {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
					line-height: 40rpx;
				}

				.s {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					line-height: 40rpx;
				}
			}

			.amount {
				margin-top: 20rpx;

				.amountTitle {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
					line-height: 40rpx;
					white-space: nowrap;
				}

				.amountIpt {
					width: 528rpx;
					height: 72rpx;
					background: rgba(191, 191, 191, 0.1);
					border-radius: 52rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
					line-height: 44rpx;
					padding-left: 20rpx;
				}
			}
		}
	}

	.bom {
		width: 100%;
		height: 120rpx;
		background-color: #ffffff;
		position: fixed;
		left: 0;
		bottom: 0;
		padding: 0 32rpx 0 64rpx;
		z-index: 1;

		.bomL {
			.total {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #afa9b0;
				line-height: 40rpx;
			}

			.combined {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
				line-height: 40rpx;
				margin-left: 20rpx;
			}

			.price {
				font-size: 40rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #000000;
				line-height: 44rpx;
			}
		}

		.bomR {
			button {
				padding: 0;
				margin: 0;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #ffffff;
				width: 200rpx;
				height: 72rpx;
				background: #F2615F;
				border-radius: 52rpx;
				border: none;
			}
		}
	}

	.tipsBox {
		width: 550rpx;
		height: 646rpx;
		padding-top: 64rpx;
		flex-direction: column;

		.tipsTitle {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
			line-height: 40rpx;
			margin-bottom: 80rpx;
		}

		.fail {
			width: 92rpx;
			height: 92rpx;
		}

		.failReason {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #736464;
			line-height: 40rpx;
			margin-top: 80rpx;
		}

		.tipsLine {
			width: 100%;
			height: 2rpx;
			background-color: #EBEDF0;
			margin-top: 72rpx;
		}

		.tipsBtnBox {
			margin-top: 40rpx;

			.sureBtn {
				padding: 0;
				margin: 0 26rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #ffffff;
				width: 200rpx;
				height: 72rpx;
				background: #F2615F;
				border-radius: 52rpx;
				border: none;
			}

			.backBtn {
				padding: 0;
				margin: 0 26rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #F2615F;
				width: 200rpx;
				height: 72rpx;
				background: #ffffff;
				border-radius: 52rpx;
				border: 2rpx solid #F2615F;
			}
		}
	}

	.paywayBox {
		width: 100%;
		background-color: #ffffff;
		border-radius: 16rpx 16rpx 0 0;
		padding-top: 44rpx;
		position: relative;
		padding-bottom: 41rpx;

		.close {
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			top: 18rpx;
			right: 20rpx;
			z-index: 1;
		}

		.paywayTitle {
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 50rpx;
			text-align: center;
		}

		.way {
			margin-top: 40rpx;

			.wayItem {
				padding: 0 39rpx 0 40rpx;
				height: 110rpx;
				border-top: 2rpx solid #F5F5F5;

				.wayItemLeft {
					.wayItemLeftImg {
						width: 44rpx;
						height: 44rpx;
					}

					.wayItemLeftCon {
						margin-left: 20rpx;

						.wayItemLeftConText {
							font-size: 30rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
							line-height: 42rpx;
						}

						.wayItemLeftConCard {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
							line-height: 42rpx;
						}
					}
				}

				.wayItemRight {
					.choose {
						width: 40rpx;
						height: 40rpx;
					}

					.add {
						.addText {
							font-size: 26rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							line-height: 37rpx;
						}

						.arrowRight {
							width: 32rpx;
							height: 32rpx;
						}
					}
				}
			}

			.wayItem:nth-last-of-type(1) {
				border-bottom: 2rpx solid #F5F5F5;
			}

		}

		.paySure {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 45rpx;
			width: 610rpx;
			height: 88rpx;
			background: #F2615F;
			border-radius: 16rpx;
			margin: 40rpx auto 0;
			padding: 0;
			border: none;
		}
	}

	.passTipsBox {
		width: 550rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		padding: 30rpx;

		.tipsTitle {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
		}

		.tipsText {
			margin-top: 30rpx;

			.safeword {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #736464;
				line-height: 40rpx;
				width: 100%;
				height: 60rpx;
				border: 1px solid #333333;
				border-radius: 16rpx;
				padding-left: 10rpx;
			}
		}

		.tipsBtnBox {
			width: 100%;
			margin-top: 30rpx;

			button {
				padding: 0;
				margin: 0;
				width: 200rpx;
				height: 72rpx;
				border-radius: 52rpx;
				font-size: 28rpx;
			}

			.tipsCloseBtn {
				color: #F2615F;
				border: 2rpx solid #F2615F;
			}

			.tipsSureBtn {
				color: #ffffff;
				border: none;
				background: #F2615F;
			}
		}
	}
</style>